<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>ECharts</title>
	<!-- 引入 echarts.js -->
	<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript" charset="utf-8"></script> -->
	<style type="text/css">
		body{
			/*background-color: #00EEF6;*/
		}
		.acharts-main {
			width: 50%;
			min-width: 600px;
			height: 500px;
			float: left;
			/* border: 1px solid aqua; */
			box-sizing: border-box;
		}
	</style>
</head>
<body>

<p>
	起始时间：<input type="date" id="startDate" style="height: 34px;" placeholder="起始时间"/>
	截止时间：<input type="date" id="endDate" style="height: 34px;" placeholder="截止时间"/>
	<button id="query">查询</button>
</p>

<p>
	<#if shiro.hasPermission("sys:buserinfo:givevip")>
		<div class="acharts-main" id="main_09" ></div>
	</#if>
	<div class="acharts-main" id="main_05" ></div>
</p>
<br/>
<p>
	<div class="acharts-main" id="main_06" ></div>
	<div class="acharts-main" id="main_07" ></div>
</p>
<br/>
<p>
	<div class="acharts-main" id="main_08" ></div>
	<div class="acharts-main" id="main_04" ></div>
</p>

</body>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/aecharts/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${request.contextPath}/statics/aecharts/chart_ztgk.data.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function () {
	function CurentTime() {
		let now = new Date();

		let year = now.getFullYear(); //年
		let month = now.getMonth() + 1 + ''; //月
		let day = now.getDate() + ''; //日

		month = month.length == 1 ? '0' + month : month;
		day = day.length == 1 ? '0' + day : day;
		return year + '-' + month + '-' + day;
	}

	console.info(CurentTime());
	document.getElementById("startDate").value = CurentTime();
	document.getElementById("endDate").value = CurentTime();

	loadData('','');

	$("#query").click(function(){
		var startDate=$("#startDate").val().trim();
		var endDate=$("#endDate").val().trim();
		loadData(startDate,endDate);
	});

	function loadData(startDate,endDate) {

		if(document.getElementById('main_09')) {
			$.ajax({
				type: "POST",
				url: "../../sys/gzhrank/rankPay",
				contentType: "application/json",
				data: JSON.stringify({'startDate': startDate, 'endDate': endDate}),
				success: function (r) {
					if (r.code == 0) {
						option_09.yAxis.data = r.category;
						option_09.series[0].data = r.bar0;
						option_09.series[1].data = r.bar1;
						option_09.series[2].data = r.bar2;
						myChart_09.setOption(option_09);
					} else {

					}
				}
			});
		}

		$.ajax({
			type: "POST",
			url: "../../sys/gzhrank/rankJRGZYHS",
			contentType: "application/json",
			data: JSON.stringify({'startDate': startDate, 'endDate': endDate}),
			success: function (r) {
				if (r.code == 0) {
					option_04.yAxis.data = r.category;
					option_04.series[0].data = r.bar;
					myChart_04.setOption(option_04);
				} else {

				}
			}
		});


		$.ajax({
			type: "POST",
			url: "../../sys/gzhrank/rankWZDJS",
			contentType: "application/json",
			data: JSON.stringify({'startDate': startDate, 'endDate': endDate}),
			success: function (r) {
				if (r.code == 0) {
					option_05.yAxis.data = r.category;
					option_05.series[0].data = r.bar0;
					option_05.series[1].data = r.bar1;
					option_05.series[2].data = r.bar2;
					myChart_05.setOption(option_05);
				} else {

				}
			}
		});


		$.ajax({
			type: "POST",
			url: "../../sys/gzhrank/rankWZFXS",
			contentType: "application/json",
			data: JSON.stringify({'startDate': startDate, 'endDate': endDate}),
			success: function (r) {
				if (r.code == 0) {
					option_06.yAxis.data = r.category;
					option_06.series[0].data = r.bar0;
					option_06.series[1].data = r.bar1;
					option_06.series[2].data = r.bar2;
					myChart_06.setOption(option_06);
				} else {

				}
			}
		});


		$.ajax({
			type: "POST",
			url: "../../sys/gzhrank/rankWORKS",
			contentType: "application/json",
			data: JSON.stringify({'startDate': startDate, 'endDate': endDate}),
			success: function (r) {
				if (r.code == 0) {
					option_07.yAxis.data = r.category;
					option_07.series[0].data = r.bar0;
					option_07.series[1].data = r.bar1;
					option_07.series[2].data = r.bar2;
					myChart_07.setOption(option_07);
				} else {

				}
			}
		});


		$.ajax({
			type: "POST",
			url: "../../sys/gzhrank/rankCLOCK",
			contentType: "application/json",
			data: JSON.stringify({'startDate': startDate, 'endDate': endDate}),
			success: function (r) {
				if (r.code == 0) {
					option_08.yAxis.data = r.category;
					option_08.series[0].data = r.bar1;
					option_08.series[1].data = r.bar2;
					myChart_08.setOption(option_08);
				} else {

				}
			}
		});
	}

});
</script>
</html>

